<template>
    <div :class="`shop-order-list-item ${mode}`">
        <div class="item-header">
            <div class="base-info">
                <div class="store-name title-color">
                    <span class="mode-tag">{{tagValue}}</span>
                    {{itemInfo.warehouse_name}}
                </div>
                <div class="date-value">{{itemInfo.submit_time}}</div>
            </div>
            <div :class="`status-info ${isEndStatus ? 'is-end' : ''}`">{{statusInfo.text}}</div>
        </div>
        <div class="item-content">
            <template v-if="itemInfo.details.length === 1">
                <OrderGoodsItem :itemInfo="itemInfo.details[0]" :isOnlyShow="true" />
            </template>
            <template v-else>
                <div class="list">
                    <img v-for="(item, index) in itemInfo.details" :key="index" class="list-img" :src="imageSrc(item.pic)" alt="">
                </div>
            </template>
            <div class="total-price-amount title-color">
                共{{itemInfo.details.length}}件商品 {{statusInfo.isHavePay ? '待支付' : ''}}<span class="price"><span class="label">￥</span>{{ itemInfo.trans / 100 }}</span>
            </div>
        </div>
        <div class="item-footer">
            <Button class="action-btn" :round="buttonRound" size="small" @click="gotoDetail">查看详情</Button>
            <Button v-if="statusInfo.isHaveCancel" class="action-btn" :round="buttonRound" size="small" @click="cancelOrderAction">取消订单</Button>
            <Button v-if="statusInfo.isHavePickUpCode" class="action-btn" :round="buttonRound" :style="`${fontColor}${borderThemeColor(1)}`" size="small" @click="showPickUpCode">取货码</Button>
            <Button v-if="statusInfo.isHavePay" class="action-btn" :style="themeBackround" :round="buttonRound" size="small" @click="() => showTipAction(false)">立即支付</Button>
            <Button v-if="statusInfo.isHaveReceivi" class="action-btn" :round="buttonRound" :style="`${fontColor}${borderThemeColor(1)}${themeBackround}`" size="small" @click="handleConfirm">{{statusInfo.isHavePickUpCode ? '确认提货' : '确认收货'}}</Button>
        </div>
        <!-- 组合单提示 -->
        <UniteOrderTip ref="tip" :uniteOrderInfo="uniteOrderInfo" @cancel="cancelOrder" @pay="handlePayOrder" :isCancel="isCancel" />
        <!-- 提货码 -->
        <OrderPickUpCode ref="pickUpCode" :code="itemInfo.pick_up_code" :orderNumber="itemInfo.order_number" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Button } from 'vant';
import OrderGoodsItem from './OrderGoodsItem';
import UniteOrderTip from '../components/UniteOrderTip';
import OrderPickUpCode from '../orderDetail/OrderPickUpCode';
import ShopPayType from '../components/ShopPayType';
import ShopMemberPassword from '../components/ShopMemberPassword';

import { SHOP_ORDER_STATUS } from '@constants/shopOrderStatus';
import { DELIVERY_TYPE_SHORT_TEXT, SHOP_TRADE_CHANNEL } from '@constants/shop';
import { redirectTo } from '@common/utils';
import { getShopOrderTipInfo } from '@biztools/shopOrder';
import { createShopImageSrc } from '@common/utils';
import { TipError, TipSuccess, ClearTip, Tip } from '@common/tip';
import { ORDER_PAY_TYPE } from '@constants/pay';

import ModeMixin from '@common/mixin';
import logger from '@common/logger';

export default {
    name: 'OrderListItem', // 订单列表项
    mixins: [ModeMixin],
    components: {
        Button,
        OrderGoodsItem,
        UniteOrderTip,
        ShopPayType,
        OrderPickUpCode,
        ShopMemberPassword,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            uniteOrderInfo: {},
            isCancel: false,
        };
    },
    computed: {
        ...mapState({
            memberInfo: state => state.shopMember.memberInfo,
        }),
        tagValue() {
            const { itemInfo } = this.$props;
            return DELIVERY_TYPE_SHORT_TEXT[itemInfo.delivery_type];
        },
        isEndStatus() {
            const { itemInfo } = this.$props;
            if (itemInfo.status === SHOP_ORDER_STATUS.ORDER_COMPLETE || itemInfo.status === SHOP_ORDER_STATUS.ORDER_CLOSE) {
                return true;
            }
            return false;
        },
        statusInfo() {
            return getShopOrderTipInfo(this.$props.itemInfo);
        },
        imageSrc() {
            return name => createShopImageSrc(name);
        },
    },
    methods: {
        ...mapActions([
            'getUniteOrderAbstract',
            'cancelUniteOrderInList',
            'directCancelUniteOrder',
            'repayUniteOrderAction',
            'repayOrder',
            'setAfterSaleOrderInfo',
            'confirmOrder',
        ]),
        gotoDetail() {
            const { itemInfo } = this.$props;
            redirectTo(`shop-order/detail/${itemInfo.order_number}`);
        },
        async showTipAction(isCancel=false) {
            const { itemInfo } = this.$props;
            const info = await this.getUniteOrderAbstract(itemInfo.request_id);
            this.uniteOrderInfo = info;
            this.isCancel = isCancel;
            this.$refs.tip.show();
        },
        cancelOrderAction() {
            if (this.statusInfo.isHavePay) {
                this.showTipAction(true);
            } else {
                this.cancelOrder();
            }
        },
        // 取消订单
        async cancelOrder() {
            logger.info('商城订单列表中取消订单');
            const { itemInfo } = this.$props;
            if (this.statusInfo.isHavePay) {
                const flag = await this.cancelUniteOrderInList(itemInfo.request_id);
                flag ? TipSuccess('取消成功！') : TipError('取消失败，请重试！');
            } else {
                // 售后取消逻辑
                this.setAfterSaleOrderInfo(itemInfo);
                redirectTo('shop-order/cancel');
            }
        },
        // 支付订单
        async handlePayOrder() {
            const { itemInfo } = this.$props;
            logger.info('商城订单支付');
            const paytype = this.uniteOrderInfo.pay_method;
            await this.repayOrder({
                requestId: itemInfo.request_id,
                isCardPay: paytype == ORDER_PAY_TYPE.card,
                orderNumber: itemInfo.order_number,
            });
        },
        // 确认收货
        async handleConfirm() {
            const { itemInfo } = this.$props;
            const flag = await this.confirmOrder(itemInfo.order_number);
            flag ? TipSuccess('确认成功！') : TipError('确认失败，请重试！');
            this.$emit('refreshList');
        },
        refreshListDataAction() {
            setTimeout(() => {
                this.$emit('refreshList');
            }, 2000);
        },
        showPickUpCode() {
            this.$refs.pickUpCode.show();
        },
    },
};
</script>

<style lang="less">
.shop-order-list-item {
    background-color: @white;
    .m(@shop-gap-md);
    .p-h(@shop-gap-md);
    .p-v(@shop-gap-md);
    .p-b(12);
    border-radius: @shop-border-radius-md;
    .mode-white();
    .item-header {
        .flex-row-between();
        .base-info {
            .store-name {
                font-size: @shop-font-size-md;
                font-weight: 500;
                .flex();
                align-items: center;
                .mode-tag {
                    height: 16px;
                    line-height: 16px;
                    color: @tip-color;
                    background-color: rgba(125,125,131,0.08);
                    .p-h(3px);
                    .m-r(3);
                    font-size: @font-size-mini;
                }
            }
            .date-value {
                color: @tip-color;
                font-size: @font-size-sm;
                .p-v(@shop-gap);
                opacity: .7;
            }
        }
        .status-info {
            font-size: @font-size-sm;
            color: @red;
            &.is-end {
                color: @tip-color;
            }
        }
    }
    .item-content {
        .list {
            overflow: hidden;
            overflow-x: auto;
            .flex();
            .list-img {
                width: 70px;
                height: 70px;
                border-radius: @border-radius;
                border: @border;
                .m-r(@shop-gap);
            }
        }
        .total-price-amount {
            .flex();
            align-items: center;
            justify-content: flex-end;
            font-size: @shop-font-size;
            color: @text-color;
            .p-v(@shop-gap-md);
            .price {
                font-size: @shop-font-size-mmd;
                font-family: @font-family-number;
                font-weight: 500;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
    &.black {
        .item-content {
            .list {
                .list-img {
                    border-color: rgba(125, 125, 131, 0.7);
                }
            }
        }
        .item-footer {
            .action-btn {
                background-color: transparent;
                border-color: rgba(125, 125, 131, 0.7);
                color: @tip-color;
            }
        }
    }
    .item-footer {
        .flex();
        width: 100%;
        .p-t(@gap);
        .border-line-top(rgba(125, 125, 131, 0.2), 0, 0);
        align-items: center;
        justify-content: flex-end;
        .action-btn {
            height: 32px;
            width: 88px;
            .m-l(@shop-gap);
        }
    }
}
</style>
